<!-- https://juejin.cn/post/7098364436351549447 -->
<template>
    <div class="home_wrap">
        <div class="pdf_down">
            <div class="pdf_set_left" @click="scaleD">放大</div>
            <div class="pdf_set_middle" @click="scaleX">缩小</div>
        </div>

        <div :style="{ width: pdf_div_width, margin: '0 auto' }" @touchstart="touchstart" @touchmove="touchmove"
            @touchend="touchend">
            <canvas v-for="page in pdf_pages" :id="'the_canvas' + page" :key="page"></canvas>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        defaultSacleDelta: {
            type: Number,
            default: 1.1,
        },
        maxScale: {
            type: Number,
            default: 2,
        },
        minScale: {
            type: Number,
            default: 0.5,
        },
        defaultScale: {
            type: Number,
            default: 0.5,
        },
        pdfSrc: {
            type: String,
            default: 'https://pdfjs.zhikuit.cn/web/xiaoshan.pdf'
        }
    },
    data() {
        return {
            currentScale: 0.5, //pdf放大系数
            pdf_pages: [],
            pdf_div_width: '',
            startX: 0,
            startY: 0,
            moveX: 0,
            moveY: 0,
            eLen: 0,
            touchDistance: null,
            startTime: null,
            previousPinchScale: 1,
            renderMode: false,
        };
    },
    created() {
        this.currentScale = this.defaultScale;
    },
    mounted() {
        this.get_pdfurl();
    },
    methods: {
        scaleD() {
            //放大
            if (this.currentScale >= this.maxScale) {
                return;
            }
            this.currentScale = this.currentScale + 0.1;
            this._loadFile(this.pdfSrc);
        },
        scaleX() {
            //缩小
            if (this.currentScale <= this.minScale) {
                return;
            }
            this.currentScale = this.currentScale - 0.1;
            this._loadFile(this.pdfSrc);
        },
        get_pdfurl() {
            //获得pdf教案
            //加载本地
            this._loadFile(this.pdfSrc);
            //线上请求
            //  this.$axios.get('')
            //  .then((res)=>{
            //  	this.pdfSrc = res.url
            //  	this._loadFile(this.pdfSrc)
            //  })
        },
        _loadFile(url) {
            console.log('_loadFile', this.currentScale);
            this.renderMode = false;
            let loadingTask = pdfjs.getDocument(url);
            loadingTask.promise.then((pdf) => {
                this.pdfDoc = pdf;
                this.pdf_pages = this.pdfDoc.numPages;
                this.$nextTick(() => {
                    this._renderPage(1);
                });
            });
        },
        _renderPage(num) {
            const that = this;
            this.pdfDoc.getPage(num).then((page) => {
                let canvas = document.getElementById('the_canvas' + num);
                let ctx = canvas.getContext('2d');
                let dpr = window.devicePixelRatio || 1;
                let bsr =
                    ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio ||
                    1;
                let ratio = dpr / bsr;
                let viewport = page.getViewport({ scale: this.currentScale });
                canvas.width = viewport.width * ratio;
                canvas.height = viewport.height * ratio;
                canvas.style.width = viewport.width + 'px';
                that.pdf_div_width = viewport.width + 'px';
                canvas.style.height = viewport.height + 'px';
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                let renderContext = {
                    canvasContext: ctx,
                    viewport: viewport,
                };
                page.render(renderContext);
                if (this.pdf_pages > num) {
                    this._renderPage(num + 1);
                } else {
                    this.renderMode = true;
                }
            });
        },
        touchstart(e) {
            console.log('touchstart');
            this.startTime = this._getTime();
            this.startX = e.touches[0].pageX;
            this.startY = e.touches[0].pageY;
            if (e.touches.length > 1) {
                let point1 = e.touches[0];
                let ponit2 = e.touches[1];
                let xLen = Math.abs(ponit2.pageX - point1.pageX);
                let yLen = Math.abs(ponit2.pageY - point1.pageY);
                this.touchDistance = this._getDistance(xLen, yLen);
                console.log('touchDistance', this.touchDistance);
            }
        },
        touchmove(e) {
            console.log('touchmove');

            this.moveX = e.touches[0].pageX;
            this.moveY = e.touches[0].pageY;
            this.eLen = e.touches.length;
            if (this.eLen > 1) {
                let point1 = e.touches[0];
                let ponit2 = e.touches[1];
                let xLen = Math.abs(ponit2.pageX - point1.pageX);
                let yLen = Math.abs(ponit2.pageY - point1.pageY);
                let distance = this._getDistance(xLen, yLen);
                if (this.touchDistance) {
                    let pinchScale = distance / this.touchDistance;
                    this.previousPinchScale = pinchScale > 1 ? pinchScale : 1;
                    console.log('previousPinchScale', this.previousPinchScale);
                }
            }
        },
        touchend() {
            console.log('touchend');
            let timestamp = this._getTime();
            if (
                (this.moveX !== null && Math.abs(this.moveX - this.startX > 0)) ||
                (this.moveY !== null && Math.abs(this.moveY - this.startY) > 0)
            ) {
                console.log('timeDis', timestamp - this.startTime);
                if (timestamp - this.startTime < 1000 && this.eLen > 1) {
                    console.log('zoom-start');
                    if (this.previousPinchScale > 1) {
                        this.zoomIn();
                    } else {
                        this.zoomOut();
                    }
                }
                this.eLen = 0;
            }
        },
        zoomIn() {
            console.log('zoomIn');
            console.log('renderMode', this.renderMode);
            if (!this.renderMode) return;
            let newScale = this.currentScale;
            if (newScale < this.maxScale) {
                newScale = newScale * this.defaultSacleDelta;
                newScale = Math.ceil(newScale * 10) / 10;
                if (this.currentScale === newScale) {
                    newScale += 0.1;
                }
                newScale = Math.min(this.maxScale, newScale);
                this.currentScale = newScale;
                console.log(this.currentScale);
                this._loadFile(this.pdfSrc);
            }
        },
        zoomOut() {
            console.log('zoomOut');
            console.log('renderMode', this.renderMode);
            if (!this.renderMode) return;
            let newScale = this.currentScale;
            if (newScale > this.minScale) {
                newScale = newScale / this.defaultSacleDelta;
                newScale = Math.ceil(newScale * 10) / 10;
                if (this.currentScale === newScale) {
                    newScale -= 0.1;
                }
                newScale = Math.max(this.minScale, newScale);
                this.currentScale = newScale;
                console.log(this.currentScale);
                this._loadFile(this.pdfSrc);
            }
        },
        _getDistance(xLen, yLen) {
            return Math.sqrt(xLen * xLen + yLen * yLen);
        },
        _getTime() {
            return new Date().getTime();
        },
    },
};
</script>
<style scoped>
.home_wrap {
    width: 100%;
    height: 100%;
}

.pdf_down {
    position: fixed;
    display: flex;
    z-index: 20;
    right: 26px;
    bottom: 7%;
}

.pdf_set_left {
    width: 30px;
    height: 40px;
    color: #408fff;
    font-size: 11px;
    padding-top: 25px;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}

.pdf_set_middle {
    width: 30px;
    height: 40px;
    color: #408fff;
    font-size: 11px;
    padding-top: 25px;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}
</style>
  